<template>
  <div>
    <input type="text" @keyup.enter="addTodo">
    <row :todoList="arr"></row>
    <btn @changeBtnState="changeBtnState"></btn>

  </div>
</template>

<script>
import Btn from './btn'
import Row from './row'
export default {
  components: {
    Btn,
    Row
  },
  props: {
    id2: String
  },
  mounted () {
    console.log(this.id2, 'id2')
    console.log(this.$route)
  },
  data () {
    return {
      btn2: 'all',
      list: [],
      id: 0
    }
  },
  computed: {
    arr () {
      return this.list.filter((item) => {
        if (this.btn2 === 'all') {
          return true
        }
        return (this.btn2 === 'finish') === item.isfinish
      })
    }
  },
  methods: {
    addTodo (event) {
      this.list.push({id: this.id++, text: event.target.value, isfinish: false})
    },
    changeBtnState (state) {
      this.btn2 = state
    }
  }

}
</script>

<style>

</style>
